<template>

  <el-container class="bill-container">

    <!-- 基础信息部分 -->

    <div class="section-header">

      <div class="line"></div>

      <span class="title">基础信息</span>

    </div>



    <el-form :model="formData" label-width="100px" class="form-content">

      <el-row :gutter="24">

        <el-col :span="8">

          <el-form-item label="订单编号">

            <el-input v-model="formData.orderId" disabled></el-input>

          </el-form-item>

        </el-col>

        <el-col :span="8">

          <el-form-item label="客户名称">

            <el-select v-model="formData.customerName" placeholder="请选择">

              <el-option label="广汇物流有限公司" value="广汇物流有限公司"></el-option>

              <el-option label="李四贸易公司" value="李四贸易公司"></el-option>

              <el-option label="王五科技有限公司" value="王五科技有限公司"></el-option>

              <el-option label="拾忆科技有限公司" value="拾忆科技有限公司"></el-option>

            </el-select>

          </el-form-item>

        </el-col>

        <el-col :span="8">

          <el-form-item label="客户编码">

            <el-input v-model="formData.customerCode" placeholder="请输入内容"></el-input>

          </el-form-item>

        </el-col>

      </el-row>



      <el-row :gutter="24">

        <el-col :span="8">

          <el-form-item label="发货人">

            <el-select v-model="formData.shipper" placeholder="请选择">

              <el-option label="面包圈" value="面包圈"></el-option>

              <el-option label="江林" value="江林"></el-option>

              <el-option label="本" value="本"></el-option>

              <el-option label="乐乐" value="乐乐"></el-option>

              <el-option label="乐善" value="乐善"></el-option>

            </el-select>

          </el-form-item>

        </el-col>

        <el-col :span="8">

          <el-form-item label="收货人">

            <el-select v-model="formData.consignee" placeholder="请选择">

              <el-option label="张color" value="张color"></el-option>

              <el-option label="奇奇" value="奇奇"></el-option>

              <el-option label="yang羡" value="yang羡"></el-option>

              <el-option label="小林" value="小林"></el-option>

              <el-option label="辣椒" value="辣椒"></el-option>

            </el-select>

          </el-form-item>

        </el-col>

      </el-row>



      <el-row :gutter="24">

        <el-col :span="8">

          <el-form-item label="始发地">

            <el-select v-model="formData.origin" placeholder="请选择">

              <el-option label="北京" value="北京"></el-option>

              <el-option label="南京" value="南京"></el-option>

              <el-option label="重庆" value="重庆"></el-option>

            </el-select>

          </el-form-item>

        </el-col>

        <el-col :span="8">

          <el-form-item label="目的地">

            <el-select v-model="formData.destination" placeholder="请选择">

              <el-option label="北京" value="北京"></el-option>

              <el-option label="南京" value="南京"></el-option>

              <el-option label="重庆" value="重庆"></el-option>

              <el-option label="洛阳" value="洛阳"></el-option>

            </el-select>

          </el-form-item>

        </el-col>

        <el-col :span="8">

          <el-form-item label="合同">

            <el-select v-model="formData.contract" placeholder="请选择">

              <el-option label="合同一" value="合同一"></el-option>

              <el-option label="合同二" value="合同二"></el-option>

              <el-option label="合同三" value="合同三"></el-option>

            </el-select>

          </el-form-item>

        </el-col>

      </el-row>

      <el-row :gutter="24">

        <el-col :span="8">

          <el-form-item label="运输类型">

            <el-select v-model="formData.transportationType" placeholder="请选择">

              <el-option label="整车" value="整车"></el-option>

              <el-option label="零担" value="零担"></el-option>

            </el-select>

          </el-form-item>

        </el-col>

        <el-col :span="8">

          <el-form-item label="货物类型">

            <el-select v-model="formData.goodsType" placeholder="请选择">

              <el-option label="请选择" value=""></el-option>

              <el-option label="日用品" value="日用品"></el-option>

              <el-option label="食品" value="食品"></el-option>

              <el-option label="文件" value="文件"></el-option>

              <el-option label="家具" value="家具"></el-option>

              <el-option label="其它" value="其它"></el-option>

            </el-select>

          </el-form-item>

        </el-col>

      </el-row>



      <el-row :gutter="24">

        <el-col :span="8">

          <el-form-item label="订单来源">

            <el-select v-model="formData.orderSource" placeholder="请选择">

              <el-option label="手动添加" value="手动添加"></el-option>

              <el-option label="App用户下单" value="App用户下单"></el-option>

              <el-option label="系统导入" value="系统导入"></el-option>

              <el-option label="其他" value="其他"></el-option>

            </el-select>

          </el-form-item>

        </el-col>

        <el-col :span="8">
          <el-form-item label="下单时间">
            <el-date-picker type="datetime" value-format="yyyy-MM-dd HH:mm:ss" v-model="formData.orderTime" placeholder="请选择时间"></el-date-picker>
          </el-form-item>
        </el-col>


      </el-row>



      <!-- 货物信息 -->

      <div class="title-bar goods-title">

        <div class="blue-line"></div>

        <span class="title">货物信息</span>

      </div>



      <div class="goods-content">

        <el-button type="primary" plain icon="el-icon-plus" @click="handleAddGoods">添加</el-button>

        <el-table :data="goodsList" border style="width: 100%; margin-top: 16px">

          <el-table-column type="index" label="序号" width="80"></el-table-column>

          <el-table-column prop="goodsName" label="货物名称">

            <template #default="scope">

              <el-input v-model="scope.row.goodsName"></el-input>

            </template>

          </el-table-column>

          <el-table-column prop="quantity" label="数量">

            <template #default="scope">

              <el-input-number v-model="scope.row.quantity" :min="0"></el-input-number>

            </template>

          </el-table-column>

          <el-table-column prop="unit" label="单位" width="100">

            <template #default="scope">

              <el-input v-model="scope.row.unit"></el-input>

            </template>

          </el-table-column>

          <el-table-column prop="volume" label="体积(m³)">

            <template #default="scope">

              <el-input-number v-model="scope.row.volume" :min="0"></el-input-number>

            </template>

          </el-table-column>

          <el-table-column prop="weight" label="重量(kg)">

            <template #default="scope">

              <el-input-number v-model="scope.row.weight" :min="0"></el-input-number>

            </template>

          </el-table-column>

          <el-table-column label="操作" width="100">

            <template #default="scope">

              <el-button type="danger" size="mini" @click="deleteGoods(scope.$index)">删除</el-button>

            </template>

          </el-table-column>

        </el-table>



        <el-row style="margin-top: 16px">

          <el-col :span="24">

            <el-descriptions :column="3" border>

              <el-descriptions-item label="总数量">

                {{ totalQuantity }}

              </el-descriptions-item>

              <el-descriptions-item label="总体积">

                {{ totalVolume }}m³

              </el-descriptions-item>

              <el-descriptions-item label="总重量">

                {{ totalWeight }}kg

              </el-descriptions-item>

            </el-descriptions>

          </el-col>

        </el-row>

      </div>





      <!-- 需求车辆 -->

      <div class="title-bar vehicle-title">

        <div class="blue-line"></div>

        <span class="title">需求车辆</span>

      </div>



      <el-row :gutter="24">

        <el-col :span="8">

          <el-form-item label="车型">

            <el-select v-model="car.vehicleType" placeholder="请选择">

              <el-option label="小面" value="小面"></el-option>

              <el-option label="中面" value="中面"></el-option>

              <el-option label="微面" value="微面"></el-option>

              <el-option label="长途大车" value="长途大车"></el-option>

              <el-option label="冷藏车" value="冷藏车"></el-option>

            </el-select>

          </el-form-item>

        </el-col>

        <el-col :span="8">

          <el-form-item label="车长">

            <el-select v-model="car.vehicleLength" placeholder="请选择">

              <el-option label="4米2" value="4米2"></el-option>

              <el-option label="5米2" value="5米2"></el-option>

              <el-option label="6米8" value="6米8"></el-option>

              <el-option label="7米6" value="7米6"></el-option>

              <el-option label="9米6" value="9米6"></el-option>

              <el-option label="13米" value="13米"></el-option>

            </el-select>

          </el-form-item>

        </el-col>

        <el-col :span="8">

          <el-form-item label="用车数量">

            <el-input-number v-model="car.vehicleQuantity" :min="0"></el-input-number>

          </el-form-item>

        </el-col>

      </el-row>



      <!-- 费用信息 -->

      <div class="title-bar">

        <div class="blue-line"></div>

        <span class="title">费用信息</span>

      </div>



      <el-row :gutter="24">

        <el-col :span="8">

          <el-form-item label="计费方式" required>

            <el-select v-model="fee.chargingMethod" placeholder="请选择">

              <el-option label="按重量计算" value="按重量计算"></el-option>

              <el-option label="按体积计算" value="按体积计算"></el-option>

            </el-select>

          </el-form-item>

        </el-col>

        <el-col :span="8">

          <el-form-item label="运输费" required>

            <el-input-number v-model="fee.transportationFee" :min="0"></el-input-number>

          </el-form-item>

        </el-col>

        <el-col :span="8">

          <el-form-item label="保险费">

            <el-input-number v-model="fee.insuranceFee" :min="0"></el-input-number>

          </el-form-item>

        </el-col>

      </el-row>



      <el-row :gutter="24">

        <el-col :span="8">

          <el-form-item label="包装费">

            <el-input-number v-model="fee.packagingFee" :min="0"></el-input-number>

          </el-form-item>

        </el-col>

        <el-col :span="8">

          <el-form-item label="装卸费">

            <el-input-number v-model="fee.loadingUnloadingFee" :min="0"></el-input-number>

          </el-form-item>

        </el-col>

        <el-col :span="8">

          <el-form-item label="中转费">

            <el-input-number v-model="fee.transferFee" :min="0"></el-input-number>

          </el-form-item>

        </el-col>

      </el-row>



      <el-row :gutter="24">

        <el-col :span="8">

          <el-form-item label="燃油费">

            <el-input-number v-model="fee.fuelFee" :min="0"></el-input-number>

          </el-form-item>

        </el-col>

        <el-col :span="8">

          <el-form-item label="服务费">

            <el-input-number v-model="fee.serviceFee" :min="0"></el-input-number>

          </el-form-item>

        </el-col>

        <el-col :span="8">

          <el-form-item label="其他费用">

            <el-input-number v-model="fee.otherFees" :min="0"></el-input-number>

          </el-form-item>

        </el-col>

      </el-row>



      <el-row :gutter="24">

        <el-col :span="8">

          <el-form-item label="费用合计">

            <el-input v-model="totalFee" disabled class="total-fee"></el-input>

          </el-form-item>

        </el-col>

      </el-row>



      <!-- 付款方式 -->

      <div class="title-bar">

        <div class="blue-line"></div>

        <span class="title">付款方式</span>

      </div>



      <el-row :gutter="24">

        <el-col :span="8">

          <el-form-item label="现付">

            <el-input-number v-model="pay.cashPayment" :min="0"></el-input-number>

          </el-form-item>

        </el-col>

        <el-col :span="8">

          <el-form-item label="预付">

            <el-input-number v-model="pay.prepayment" :min="0"></el-input-number>

          </el-form-item>

        </el-col>

        <el-col :span="8">

          <el-form-item label="到付">

            <el-input-number v-model="pay.cashOnDelivery" :min="0"></el-input-number>

          </el-form-item>

        </el-col>

      </el-row>



      <el-row :gutter="24">

        <el-col :span="8">

          <el-form-item label="周期付">

            <el-input-number v-model="pay.periodicPayment" :min="0"></el-input-number>

          </el-form-item>

        </el-col>

      </el-row>



      <el-row :gutter="24">

        <el-col :span="8">

          <el-form-item label="付费合计">

            <el-input v-model="totalPayment" disabled class="total-fee"></el-input>

          </el-form-item>

        </el-col>

      </el-row>



      <!-- 订单备注 -->

      <div class="title-bar">

        <div class="blue-line"></div>

        <span class="title">订单备注</span>

      </div>



      <el-row>

        <el-col :span="24">

          <el-form-item label="备注">

            <el-input type="textarea" v-model="formData.remarks" :rows="4" placeholder="请输入内容"></el-input>

          </el-form-item>

        </el-col>

      </el-row>



      <!-- 底部按钮 -->

      <el-form-item class="form-footer">

        <el-button @click="cancel">取消</el-button>

        <el-button type="primary" @click="save">保存</el-button>

      </el-form-item>

    </el-form>

  </el-container>

</template>



<script>

import axios from 'axios';

export default {

  name: 'Bill',

  data() {

    return {

      formData: {

        // 基础信息

        orderId: this.generateOrderId(),

        customerName: '',

        customerCode: '',

        shipper: '',

        consignee: '',

        origin: '',

        destination: '',

        contract: '',

        transportationType: '',

        goodsType: '',

        orderSource: '',

        orderTime: '',

        remarks: ''

      },

      // 货物信息列表

      goodsList: [],

      // 车辆信息

      car: {

        vehicleType: '',

        vehicleLength: '',

        vehicleQuantity: ''

      },

      // 费用信息

      fee: {

        chargingMethod: '',

        transportationFee: '',

        insuranceFee: '',

        packagingFee: '',

        loadingUnloadingFee: '',

        transferFee: '',

        fuelFee: '',

        serviceFee: '',

        otherFees: ''

      },

      // 付款方式

      pay: {

        cashPayment: '',

        prepayment: '',

        cashOnDelivery: '',

        periodicPayment: ''

      }

    }

  },

  computed: {

    totalQuantity() {

      return this.goodsList.reduce((sum, item) => sum + (Number(item.quantity) || 0), 0)

    },

    totalVolume() {

      return this.goodsList.reduce((sum, item) => sum + (Number(item.volume) || 0), 0)

    },

    totalWeight() {

      return this.goodsList.reduce((sum, item) => sum + (Number(item.weight) || 0), 0)

    },

    totalFee() {

      const fees = [

        this.fee.transportationFee,

        this.fee.insuranceFee,

        this.fee.packagingFee,

        this.fee.loadingUnloadingFee,

        this.fee.transferFee,

        this.fee.fuelFee,

        this.fee.serviceFee,

        this.fee.otherFees

      ]

      return fees.reduce((sum, fee) => sum + (Number(fee) || 0), 0)

    },

    totalPayment() {

      const payments = [

        this.pay.cashPayment,

        this.pay.prepayment,

        this.pay.cashOnDelivery,

        this.pay.periodicPayment

      ]

      return payments.reduce((sum, payment) => sum + (Number(payment) || 0), 0)

    }

  },

  methods: {

    generateOrderId() {

      const timestamp = new Date().getTime();

      const randomNum = Math.floor(Math.random() * 1000);

      return `D${timestamp}${randomNum}`;

    },

    handleAddGoods() {

      // const newGoodsId = Date.now() + Math.floor(Math.random() * 1000);

      this.goodsList.push({

        // id: newGoodsId,

        goodsName: '',

        quantity: '',

        unit: '',

        volume: '',

        weight: ''

      });

    },

    deleteGoods(index) {

      this.goodsList.splice(index, 1);

    },

    save() {

      // 整理所有数据到一个对象中

      const allData = {

        formData: this.formData,

        goodsList: this.goodsList,

        vehicleInfo: this.car,

        feeInfo: {

          ...this.fee,

          totalFee: this.totalFee

        },

        paymentMethodInfo: {

          ...this.pay,

          totalPayment: this.totalPayment

        }

      };

      // 发送数据到后端

      axios.post('http://localhost:10086/orders/order/addOrders', allData)

          .then(res => {

            if (res.data.code === 1) {


              this.$message({

                message: '订单资料保存成功',

                type: 'success'

              });

              this.resetForm();

            } else {

              this.$message.error('保存失败');

            }

          })

          .catch(error => {

            console.error('发送数据出错', error);

            this.$message.error('发送数据出错');

          });

    },

    cancel() {

      this.resetForm();

      console.log('取消操作');

    },

    resetForm() {

      this.formData = {

        orderId: this.generateOrderId(),

        customerName: '',

        customerCode: '',

        shipper: '',

        consignee: '',

        origin: '',

        destination: '',

        contract: '',

        transportationType: '',

        goodsType: '',

        orderSource: '',

        orderTime: '',

        remarks: ''

      };

      this.goodsList = [];

      this.car = {

        vehicleType: '',

        vehicleLength: '',

        vehicleQuantity: ''

      };

      this.fee = {

        chargingMethod: '',

        transportationFee: '',

        insuranceFee: '',

        packagingFee: '',

        loadingUnloadingFee: '',

        transferFee: '',

        fuelFee: '',

        serviceFee: '',

        otherFees: ''

      };

      this.pay = {

        cashPayment: '',

        prepayment: '',

        cashOnDelivery: '',

        periodicPayment: ''

      };

    }

  }

};

</script>



<style scoped>

.bill-container {

  padding: 24px;

  background: #fff;

  min-width: 1200px;

}



.title-bar {

  display: flex;

  align-items: center;

  margin-bottom: 24px;

  border-bottom: 1px solid #EBEEF5;

  padding-bottom: 16px;

}



.blue-line {

  width: 4px;

  height: 16px;

  background: #0052FF;

  margin-right: 8px;

  border-radius: 2px;

}



.title {

  font-size: 16px;

  font-weight: 500;

  color: #333;

}



.goods-title {

  margin-top: 32px;

}



.vehicle-title {

  margin-top: 48px;

}



.delete-btn {

  color: #F56C6C;

}



.total-fee {

  color: #F56C6C;

  font-weight: 500;

}



.form-footer {

  text-align: center;

  margin-top: 40px;

}

</style>
